Skip to content

Conversation

@staskus
Copy link
Contributor

@staskus staskus commented Jul 1, 2025

WOOMOB-114

Description

The card reader update images are represented in poor quality and blink when progress changes

image

Solution

The image quality can be easily fixed by updating UIGraphicsBeginImageContextWithOptions(rect.size) to UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0), which makes sure that the correct scale image is picked.

However, we cannot ensure smooth animation by generating new images every time a progress value changes. SwiftUI doesn't know how to properly animate between two images.

The solution to have a smooth animation was to create a PointOfSaleCardPresentPaymentReaderUpdateProgressView, which can animate the update progress within a circle.

Steps to reproduce

POS

  1. Enable Terminal.shared.simulatorConfiguration.availableReaderUpdate = .required within StripeCardReaderService
  2. Open POS
  3. Connect to reader
  4. Observe a smooth software update animation with high quality images

IPP

Verify IPP works correctly. I only updated the image color since it used old brand colors, I haven't replaced it with new animation.

Testing information

Tested on iPad Air 18.5 and 20.6 simulator

Screenshots

POS

progress.view.mov

IPP

Simulator Screenshot - iPad Pro 11-inch (M4) - 2025-07-01 at 23 49 58


  • I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

staskus added 6 commits July 1, 2025 14:43
…xt scale

Replace UIGraphicsBeginImageContext with UIGraphicsBeginImageContextWithOptions to ensure images are rendered at proper device scale (1x, 2x, 3x). This fixes blurry rounded borders and overall image quality issues in card reader software update progress displays.

Changes:
- Use UIGraphicsBeginImageContextWithOptions(size, false, 0.0) for scale-aware rendering
- Apply fix to both composite() and softwareUpdateProgressFill() methods
- Resolves blurriness on retina displays
Having a SwiftUI view for update progress view allows for proper animation
@staskus staskus added this to the 22.8 milestone Jul 1, 2025
@staskus staskus requested a review from iamgabrielma July 1, 2025 20:58
@staskus staskus added type: task An internally driven task. feature: POS labels Jul 1, 2025
@wpmobilebot
Copy link
Collaborator

wpmobilebot commented Jul 1, 2025

App Icon📲 You can test the changes from this Pull Request in WooCommerce iOS Prototype by scanning the QR code below to install the corresponding build.

App NameWooCommerce iOS Prototype
Build Number30934
VersionPR #15855
Bundle IDcom.automattic.alpha.woocommerce
Commit36efecb
Installation URL2ild6dfl7ub9o
Automatticians: You can use our internal self-serve MC tool to give yourself access to those builds if needed.

Copy link
Contributor

@iamgabrielma iamgabrielma left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works great! Tested both IPP and POS 🚢

Removing the image as a property seems to make fail these 6 tests, but we only need to update the assertion. I'll leave it as pre-approved 👍

@staskus staskus enabled auto-merge July 2, 2025 07:08
@staskus staskus merged commit ea2d1b5 into trunk Jul 2, 2025
13 checks passed
@staskus staskus deleted the woomob-114-woo-pos-improve-card-reader-software-update-image branch July 2, 2025 07:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature: POS type: task An internally driven task.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants